import { Button, Card, Modal, Form, Input, Table, message } from 'antd'
import { ColumnType } from 'antd/lib/list';
import { ColumnsType } from 'antd/lib/table';
import React, { useEffect, useState } from 'react'
import { EditOutlined, DeleteOutlined, ExclamationCircleFilled } from "@ant-design/icons";
import { delAllHospital, delHospital, reqGetHospitalSetList } from '@/api/hospital/HospitalSet';
import { HospitalItem, HospitalLimt } from '@/api/hospital/model/hospitalSetType';
import { useForm } from 'antd/lib/form/Form';
import { useNavigate, useParams } from 'react-router-dom';
const { confirm } = Modal;


export default function HospitalList() {
  // 将多选框数据存入状态
  let [staeType, setStateType] = useState<React.Key[]>([])
  // 添加跳转
  let navigate = useNavigate()
  // 存储total
  let [total, settotal] = useState<number>(0)
  //    存储current
  let [current, setcurrent] = useState<number>(1)
  // 存储当前页数
  let [pageSize, setpageSize] = useState<number>(10)
  // 存储医院列表数据
  let [hospital, sethospital] = useState<HospitalLimt>([])
  // 设置loading状态
  let [loading, setloading] = useState<boolean>(false)
  // 获取form表单输入框的数据
  let [form] = useForm()

  // 请求医院设置列表方法
  let gethospitalList = async (page = current, limit = pageSize) => {
    let { hosname, hoscode } = form.getFieldsValue()
    setloading(true)
    let res = await reqGetHospitalSetList({ page, limit, hosname, hoscode })
    sethospital(res.records)
    settotal(res.total)
    setloading(false)
  }
  // 模拟生命周期
  useEffect(() => {
    gethospitalList()
  }, [current, pageSize])

  // form表单点击查询获取数据
  let finsh = () => {
    gethospitalList()

  }
  // 清空数据
  let clear = () => {
    gethospitalList()
  }


  // 单个删除数据
  let del = (id: number, name: string) => {
    return () => {
      confirm({
        title: `确定要删除 ${name}   吗?`,
        icon: <ExclamationCircleFilled />,
        onOk: async () => {
          await delHospital(id)
          message.success("删除成功")
          gethospitalList(1, 10)
        }
      })


    }
  }
  // 批量删除

  let delall = () => {
    confirm({
      title: `确定要删除吗?`,
      icon: <ExclamationCircleFilled />,
      async onOk() {
        await delAllHospital(staeType)
        setStateType([])
        message.success("删除成功")
      }
    })
  }

  const columns: ColumnsType<any> = [
    {

      align: 'center',
      title: '序号',
      render(key, value, index) {
        return index + 1

      }

    },
    {
      align: 'center',
      title: '医院名称',
      dataIndex: 'hosname',

    },
    {
      align: 'center',
      title: '医院编号	',
      dataIndex: 'hoscode',

    },
    {
      align: 'center',
      title: 'api基础路径	',
      dataIndex: 'apiUrl',

    }, {
      align: 'center',
      title: '签名',
      dataIndex: 'signKey',

    }, {
      align: 'center',
      title: '联系人姓名',
      dataIndex: 'contactsName',

    }, {
      align: 'center',
      title: '联系手机号',
      dataIndex: 'contactsPhone',

    }, {
      align: 'center',
      title: '操作',
      fixed: "right",
      render(row: HospitalItem) {

        return <>
          <Button type="primary" icon={<EditOutlined />} onClick={() => {
            navigate(`/syt/hospital/hospitalset/update/${row.id}`)
          }} ></Button>
          <Button type="primary" className='ml' onClick={del(row.id, row.hosname)} icon={<DeleteOutlined />} danger></Button>

        </>
      }

    }
  ];
  return (
    <Card>
      {/* 表格 */}
      <Form
        layout="inline"
        onFinish={finsh}
        onReset={clear}
        form={form}
      >
        <Form.Item
          name="hosname"
        >
          <Input />
        </Form.Item>

        <Form.Item

          name="hoscode"

        >
          <Input />
        </Form.Item>

        <Form.Item >
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button className='ml' type="default" htmlType="reset">
            清空
          </Button>
        </Form.Item>
      </Form>
      {/* 添加和删除 */}
      <div className='mt'>
        <Button type="primary" htmlType="submit"  onClick={() => {
          navigate("/syt/hospital/hospitalset/add")
        }}>
          添加
        </Button>
        <Button className='ml' onClick={delall} type="primary" danger disabled={staeType.length === 0}>
          批量删除
        </Button>
      </div>

      {/* Table表格 */}

      <Table
        rowKey="id"
        scroll={{ x: 1500 }}
        className='mt'
        rowSelection={{
          onChange(selectedRowKeys: React.Key[]) {

            setStateType(selectedRowKeys)
          }


        }}
        bordered
        loading={loading}
        pagination={{
          pageSizeOptions: [5, 10, 15, 20],  //  设置每页展示数据量
          showSizeChanger: true, //永远展示控制分页器
          total: total,
          pageSize: pageSize,
          current: current,

          showQuickJumper: true,
          showTotal(total: number) {
            return <span>
              总页数为:{total}
            </span>

          },
          onChange(page: number, pageSize: number) {

            setcurrent(page)
            setpageSize(pageSize)


          }

        }}

        dataSource={hospital} columns={columns} />

    </Card>

  )
}
